<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input size="small" v-model="listQuery.searchData" placeholder="搜索内容" style="width: 350px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter" style="margin-left: 20px">
        查询
      </el-button>
      <el-button size="small"  :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出Excel
      </el-button>
    </div>
    <el-table  v-loading="listLoading" :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
<!--      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item"/>-->
      <el-table-column v-for="item of tableHeader" :key="item" :label="item" >
        <template slot-scope="scope">
          <div v-if="item == '操作'">
            <el-button style="margin-bottom: 10px" size="mini" type="danger" @click="handleDelete(scope.row[item]['submit_id'],scope.row[item]['forms_id'],scope.$index)">
              删除
            </el-button>
          </div>
          <div v-else>
           {{scope.row[item]}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getFormsDatas" />
  </div>
</template>

<script>
import {delSubmit, getFormsDatas} from '@/api/application'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'appDataList',
  props:{
    forms_id:{
      type:Number
    },
    table_name:{
      type:String
    }
  },
  data() {
    return {
      downloadLoading:false,
      listLoading:true,
      tableData: [],
      tableHeader: [],
      total:0,
      listQuery: {
        page: 1,
        limit: 10,
        forms_id: this.forms_id,
        searchData:undefined
      },
    }
  },
  created() {
    this.getFormsDatas()
  },
  watch:{
    forms_id(new_id,old_id){
      this.listLoading = true
      this.listQuery.forms_id = new_id
      this.getFormsDatas()
    }
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getFormsDatas()
    },
    getFormsDatas(){
      getFormsDatas(this.listQuery).then(res=>{
        this.tableData = res.tableData
        this.tableHeader = res.tableHeader
        this.total = res.total
        this.listLoading = false
     })
    },
    handleDelete(submit_id,forms_id,index) {
      this.$confirm('此操作将永久删除该id为'+submit_id+'的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delSubmit({	submit_id,forms_id}).then(response => {
          // this.list = response.data.items
          if(response.status==200){
            this.$notify({
              title: 'Success',
              message: response.msg,
              type: 'success',
              duration: 2000
            })
            this.tableData.splice(index, 1)
          }else{
            this.$notify({
              title: 'Error',
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
       let caozuoIndex =  this.tableHeader.indexOf('操作')
        if (caozuoIndex != -1){
          this.tableHeader.splice(caozuoIndex,1)
        }
        const tHeader = this.tableHeader
        const filterVal = this.tableHeader
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.table_name+'_数据导出'+new Date().getTime()
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.tableData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
  },
  components:{
    Pagination
  }
}
</script>
